<template>
	<view>
		<view>
			<view class="flex justify-center margin">
				<view class="flex">
					<view class="tab-item margin-right-xl" :class="{'tab-item-active': tabIndex == 1}" @click="selectTab(1)">待发放</view>
					<view class="tab-item" :class="{'tab-item-active': tabIndex == 0}" @click="selectTab(0)">已发放</view>
				</view>
			</view>
			<view class="bg-white margin-lr padding font-13 text-black3 radius-8 margin-bottom" v-for="(item, index) in orderAwardList" :key="index">
				<view class="flex justify-between">
					<view>订单号：{{item.orderId}}<text class="copy-btn" @click="copyCode(item.orderId)">复制</text></view>
					<view class="text-theme">{{ tabIndex == 0 ? '已发放' : '待发放' }}</view>
				</view>
				<view class="margin-top-sm">发放时间：{{item.awardTime}}</view>
				<view class="margin-top-sm">周薪数量：{{item.buyCount}} 笔</view>
				<view class="margin-top-sm">发放金额：{{item.remark}}</view>
			</view>
		</view>
		
		<u-loadmore :status="status" color="#000000" class="padding-bottom"/>
		
	</view>
</template>

<script>
	import {
		weeklyWage
	} from '@/common/api/order.js'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				status: 'loading',
				tabIndex: 1,
				pageNo: 0,
				rankList: [],
				extend: {},
				orderAwardList: [],
				sendFlag: 0,
				scrollTop: 0,
				walletInfo: {},
				orderId: ''
			};
		},
		computed: {
			...mapState('user', ['userInfo'])
		},
		onLoad(options) {
			this.orderId = options.orderId
			this.getOrderAward()
		},
		onReachBottom() {
			this.getOrderAward()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: {
			resetData() {
				this.pageNo = 0
				this.rankList = []
				this.extend = {}
				this.orderAwardList = []
				this.tabIndex = 1
				this.sendFlag = 0
			},
			getOrderAward(walletType) {
				this.pageNo++
				this.status = 'loading'
				weeklyWage({pageNo: this.pageNo, pageSize: 10, rewardType: 1, sendFlag: this.sendFlag, orderId: this.orderId}).then(res => {
					this.orderAwardList = this.orderAwardList.concat(res.data)
					if (res.data.length < 10) {
						this.status = 'nomore'
					}
				})
			},
			selectTab(index) {
				this.resetData()
				this.tabIndex = index
				if(this.tabIndex == 0) {
					this.sendFlag = 1
				}
				if(this.tabIndex == 1) {
					this.sendFlag = 0
				}
				this.getOrderAward()
			},
			copyCode(code) {
				let that = this
				uni.setClipboardData({
					data: code,
					success: function() {
						that.$msg('复制成功')
					}
				})
			}
		}
	}
</script>

<style lang="scss">
page {
    background: #f2f2f2;
}
</style>
<style lang="scss" scoped>
.head {
    background-image: url('/static/my/service-bg.png');
    background-size: 100% 100%;
}
.copy-btn {
    border: 2rpx solid #808080;
    color: #808080;
    font-size: 20rpx;
    padding: 2rpx 10rpx;
    margin-left: 20rpx;
    border-radius: 6rpx;
}
.level {
    background: linear-gradient(42deg, #FF0804 0%, #FC7844 100%);
    box-shadow: 0 2rpx 10rpx 1rpx rgba(250,49,33,0.24);
    color: #ffffff;
    font-size: 24rpx;
    padding: 4rpx 10rpx;
    border-radius: 8rpx;
    margin-left: 20rpx;
    min-width: 96rpx;
    text-align: center;
}
.tab-item {
    width: 240rpx;
    height: 64rpx;
    box-shadow: 0rpx 2rpx 10rpx 1rpx rgba(250,49,33,0.24);
    color: #FA3121;
    font-size: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #FA3121;
    border-radius: 16rpx;
}
.tab-item-active {
    background: linear-gradient(42deg, #FF0804 0%, #FC7844 100%);
    color: #ffffff;
    border: none !important;
}
.buy-btn {
    width: 110rpx;
    height: 50rpx;
    border-radius: 8rpx;
    border: 1rpx solid #FA3121;
    font-size: 28rpx;
    color: #FE1A13;
    display: flex;
    justify-content: center;
    align-items: center;
}
.fg-btn {
    background-color: #FA3121;
    color: #ffffff !important;
}
</style>
